<template>
  <div class="page">
    <NavHeader header="我的待办">

    </NavHeader>
    <div style="height: 20rpx"></div>
    <div class="search-box">
      <div style="flex-grow: 1">
        <input v-model="searchParams.keyword" placeholder="输入关键词进行搜索.."  @confirm="handleSearch"/>
      </div>
      <image @click="handleSearch" style="width: 30rpx;height: 30rpx;margin-left: 20rpx" src="/static/search.png"></image>
    </div>
    <div class="content task-content">
      <u-empty v-if="!dataList.length" text="暂无数据" mode="list"></u-empty>
      <scroll-view scroll-y="true" @scrolltolower="onScroll" style="height: 100%">
        <div class="card" v-for="item in dataList" :key="item.id" @click="pageDetail(item)">
          <div class="card-top">
            <div class="card-left">
              <div class="card-title">
                <div class="section"></div>
                <div class="title">{{ item.name }}</div>
              </div>
              <div class="card-time">
                <text class="card-time-label">工期</text>：{{ item.expect_start_time }} ~ {{ item.expect_finish_time }}
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="card-desc">
            {{ item.description }}
          </div>
          <div class="card-footer">
            <div class="card-time" style="display: flex;align-items: center;">
              <u-image height="26" width="26" src="/static/icon/time.png" style="margin-right: 18rpx"></u-image>
              {{ item.create_time }}
            </div>
            <div class="primary-button">详情</div>
          </div>
        </div>
        <u-loadmore v-if="dataList.length" :status="loading" />
        <div style="height: 40rpx"></div>
      </scroll-view>
    </div>

    <Tabbar :count="totalCount" path="/pages/task/index"/>
  </div>
</template>
<script>
import NavHeader from "../../components/NavHeader.vue";
import Tabbar from "../../components/Tabbar.vue";
import Mixin from "../../common/mixin";
import { mapGetters } from 'vuex';
export default {
  name: "index",
  components: {Tabbar, NavHeader},
  mixins: [Mixin],
  data() {
    return {
      searchParams: {
        keyword: ''
      },
    }
  },
  onShow() {
    this.handleSearch()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    getList() {
      uni.showLoading({
        title: '加载中',
        mask: true,
        duration: 0
      })
      this.$api.getTaskTodoPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams,
        supplier_user_id: this.userInfo.id
      }).then(res => {
        this.totalCount = res.count
        let list = []
        res.rows.forEach(item => {
          let taskDetail = {}
          if (item.task_detail) {
            taskDetail = JSON.parse(item.task_detail)
            taskDetail.taskId = taskDetail.id
            delete taskDetail.id
          }
          console.log('taskDetail',taskDetail)
          list.push({
            ...item,
            taskDetail,
            ...taskDetail
          })
        })
        if (this.pageNum === 1) {
          this.dataList = []
        }
        this.dataList = [
          ...this.dataList,
          ...list
        ]
        if (this.pageNum >= this.totalPage) {
          this.loading = 'nomore'
        } else {
          this.loading = 'loadmore'
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    pageDetail(item) {
      console.log('item.taskId',item.taskId)
      uni.navigateTo({
        url: `/pages/task/todoDetail?taskId=${item.taskId}&id=${item.id}`
      })
    }
  }

}
</script>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.search-box {
  flex-shrink: 0;
  width: 690rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 16rpx;
  border: 2rpx solid #FFFFFF;
  margin: 20rpx auto;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.card {
  width: 690rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  opacity: 0.8;
  margin: 20rpx auto;
  padding: 24rpx 24rpx;

  .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    padding-top: 24rpx;
  }

  .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .card-left {
      .card-title {
        display: flex;
        align-items: center;

        .section {
          width: 6rpx;
          height: 29rpx;
          background: #17BDB2;
          border-radius: 1px;
        }

        .title {
          padding: 0 12rpx;
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 34rpx;
          color: #1A1A1A;
        }

      }
    }
  }

  .card-desc,
  .card-time {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    padding: 16rpx 18rpx;
    padding-bottom: 0;
    color: #666666;
  }

  .line {
    border-bottom: 1px solid #E6E6E6;
    padding: 12rpx 0;
  }

  .card-desc {
    // 三行溢出省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
  }
}
</style>
